<template>
  <div class="listWarp">
    <div class="bScrollWrap" ref="wrapper">
      <div class="bScroll">
        <div class="listArea">
          <div class="listTitle">当前城市</div>
          <div class="itemWrap">
            <div class="item">
              <div class="itemCt" v-text="currentCity"></div>
            </div>
          </div>
        </div>
        <div class="listArea">
          <div class="listTitle">热门城市</div>
          <div class="itemWrap">
            <div
              class="item"
              v-for="item of hotCities"
              :key="item.id"
              @click="chooseCity(item)"
            >
              <div class="itemCt" v-text="item.name"></div>
            </div>
          </div>
        </div>
        <div class="listArea">
          <div v-for="(item, key) of alphabetList" :key="key" :ref="key">
            <div class="listTitle" v-text="key"></div>
            <div class="areaList">
              <div
                class="item"
                v-for="val of item"
                :key="val.id"
                @click="chooseCity(val)"
              >
                <div class="itemCt" v-text="val.name"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCities: {
      type: [Array],
      required: true
    },
    alphabetList: {
      type: [Object],
      required: true
    },
    letter: {
      type: [String],
      required: true
    }
  },
  data () {
    return {
      currentCity: ''
    }
  },
  mounted: function () {
    this.currentCity = this.$route.query.id
    this.scrollExe = new BScroll(this.$refs.wrapper)
  },
  methods: {
    ...mapActions({ setCity: 'chooseCity' }),
    chooseCity: function (val) {
      this.currentCity = val.name
      this.setCity(val.name)
      this.$router.go(-1)
    }
  },
  watch: {
    letter: function (newVal, oldVal) {
      this.scrollExe.scrollToElement(this.$refs[newVal][0], 0)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/varibles.styl'
.listWarp{
  margin-top: -1.63rem
  padding-top 1.63rem
  height 100vh
  box-sizing border-box
  .bScrollWrap{
    width 100%
    height 100%
    overflow hidden
    position relative
    .bScroll{
      width 100%
      .listArea{
        font-weight bold
        color #666
        .listTitle{
          line-height 0.54rem
          font-size 0.26rem
          background-color #eee
          padding-left 0.2rem
        }
        .itemWrap{
          padding 0.1rem 0.6rem 0.1rem 0.1rem
          overflow hidden
          .item{
            width 33.33%
            float left
            .itemCt{
                border 1px solid #ccc
                text-align center
                padding .1rem 0
                border-radius 0.06rem
                margin 0.1rem 0.2rem;
                &:before{
                  border-color #ccc
                }
                &:after{
                  border-color #ccc
                }
            }
          }
        }
        .areaList{
          color #666
          .item{
            padding-left 0.2rem
            border-bottom 1px solid #ccc
            .itemCt{
              line-height 0.76rem
            }
          }
        }
      }
    }
  }
}
</style>
